<template>
	<el-container>
		<!-- 顶栏 -->
		<el-header style="padding: 0;" v-if="CWStore.showBar">
			<headerBar :title="CWStore.cartoon.name + ' - ' + CWStore.chapterList[CWStore.prop.chapterIndex]"
				:routeBack="() => { }" :flash="CWStore.increment" />
		</el-header>
		
		<!-- 展示栏 -->
		<el-main style="background-color: #f7f7f7;" @click="switchShow">
			<cartoonView :key="CWStore.count" />
		</el-main>

		<el-footer style="padding: 0;" v-if="CWStore.showBar">
			<footerBar />
		</el-footer>
	</el-container>
</template>

<script setup lang="ts">
import headerBar from '@/components/ToolHeaderBar.vue'
import cartoonView from './CWCartoonView.vue'
import footerBar from './CWFooterBar.vue'
import { onMounted } from 'vue';
import { ElMessage } from 'element-plus'
import { useBaseStore } from '@/stores/baseStore';
import { useCWStore } from '@/stores/cwStore';
import { useRoute } from 'vue-router';
import axios from 'axios';

const CWStore = useCWStore();
const route = useRoute();

CWStore.prop.cid = route.params.cid
CWStore.prop.chapterName = route.params.chapterName


onMounted(
	() => {
		if (CWStore.prop.cid !== 'local') {
			getCartoon();
			getChapter();
		} else {
			const filePath = CWStore.prop.chapterName.replaceAll('|', '/');;
			const filePaths = filePath.split('/');
			const fileName = filePaths[filePaths.length - 1];
			const arr = new Array();
			arr.push(fileName);
			CWStore.chapterList = arr;
			CWStore.prop.chapterIndex = 0;
			CWStore.cartoon = {
				name: '本地阅读',
			}
		}
	}
)

const getCartoon = function () {
	axios.get('/api/cartoon/' + CWStore.prop.cid)
		.then((result) => {
			if (result.data.code === 200) {
				CWStore.cartoon = result.data.data[0];
				// console.log(CWStore.cartoon);
			}
		}).catch((err) => {
			ElMessage.error({
				showClose: true,
				message: "获取漫画信息失败！！！"
			})
			console.log(err);
		});
}

const getChapter = function () {
	axios.get('/api/cartoon/chapter/' + CWStore.prop.cid)
		.then((result) => {
			if (result.data.code === 200) {
				CWStore.chapterList = result.data.data;
				console.log("获取漫画章节目录：");
				// console.log(chapterList.value);
				// 更新索引章节索引
				CWStore.prop.chapterIndex = CWStore.chapterList.indexOf(CWStore.prop.chapterName)
				console.log("更新漫画章节索引：" + CWStore.prop.chapterIndex);
			}
		}).catch((err) => {
			ElMessage.error({
				showClose: true,
				message: "获取漫画章节目录失败！！！"
			})
			console.log(err);
		});
}

const switchShow = function () {
	CWStore.showBar = !CWStore.showBar
}

</script>
